<template>
    <div>
        <el-breadcrumb separator="/">
            <el-breadcrumb-item>广告统计</el-breadcrumb-item>
        </el-breadcrumb>
        <el-card class="box-card">
            <el-table
                    :data="tableData"
                    border
                    size="small"
                    style="width: 100%">
                <el-table-column
                        :prop="item.key"
                        :label="item.value"
                        v-for="(item,index) in headData" :key="index">
                    <el-table-column
                            :prop="item.key.show"
                            label="展现量"
                            v-if="index!==0">
                        <template slot-scope="scope">
                            {{scope.row[item.key].show?scope.row[item.key].show:0}}
                        </template>
                    </el-table-column>
                    <el-table-column
                            label="点击量"
                            v-if="index!==0">
                        <template slot-scope="scope">
                            {{scope.row[item.key].click?scope.row[item.key].click:0}}
                        </template>
                    </el-table-column>
                    <el-table-column
                            :prop="item.key.show"
                            label="点击率"
                            v-if="index!==0">
                        <template slot-scope="scope">
                            {{scope.row[item.key].click / scope.row[item.key].show | FormatDigit}}%
                        </template>
                    </el-table-column>
                    <span v-if="index==0" slot-scope="scope">{{scope.row.name}}</span>
                </el-table-column>
            </el-table>
            <!--            <div class="el-pagination">-->
            <!--                <el-pagination-->
            <!--                        background-->
            <!--                        @size-change="changeSize"-->
            <!--                        @current-change="changeCurrent"-->
            <!--                        :current-page="params.pagenum"-->
            <!--                        :page-sizes="[10, 20, 30, 40]"-->
            <!--                        :page-size="params.pagesize"-->
            <!--                        layout="total, sizes, prev, pager, next, jumper"-->
            <!--                        :total="params.totals">-->
            <!--                </el-pagination>-->
            <!--            </div>-->
        </el-card>
    </div>
</template>

<script>
    export default {
        name: "Comic_Classification",
        data() {
            return {
                params: {
                    pagenum: 1,
                    pagesize: 10,
                    totals: 0
                },
                tableData: [],
                headData: []
            }
        },
        created() {
            this.getTablehead();
        },
        methods: {
            getList() {
                let data = {
                    page: this.params.pagenum,
                    pagesize: this.params.pagesize
                };
                this.$axios.post("admin/ad/index", data).then(res => {
                    this.tableData = res.data.list;
                    this.params.totals = res.data.count;
                })
            },
            getTablehead() {
                this.$axios.post("admin/ad/tr_data").then(res => {
                    console.log(res.data);
                    this.headData = res.data;
                    this.getList();
                })
            },
            // 每页显示多少条
            changeSize(val) {
                this.params.pagesize = val;
                this.getList()
            },
            // 当前显示的页数
            changeCurrent(val) {
                this.params.pagenum = val;
                this.getList()
            },
        }
    }
</script>

<style scoped>

</style>